<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../react/react.development.js"></script>
    <script src="../react/react-dom.development.js"></script>
    <script src="../react/prop-types.js"></script>
    <script src="../react/babel.min.js"></script>
    <style>
        h1 {
            user-select: none;
        }
    </style>
</head>
<body>
<div id="root"></div>
<button onclick="removeBtn()">卸载组件</button>
<script type="text/babel">
    const Fragment = React.Fragment

    function removeBtn () {
        ReactDOM.render(<h1>卸载</h1>, document.getElementById('root'))
    }

    class Comp extends React.Component {
        state = {
            count: this.props.count
        }

        componentWillMounted () {
            console.log('将要挂载')
        }

        add () {
            this.setState({
                count: ++this.state.count
            })
        }

        render () {
            console.log('渲染')
            return <h1 onClick={this.add.bind(this)}>Comp的生命周期{this.state.count}</h1>
        }

        componentDidMount () {
            console.log('已经挂载完')
        }

        componentReceiveProps () {
            console.log('接收参数')
        }

        shouldComponentUpdate () {
            console.log('是否更新')
            return true
        }

        componentWillUpdate () {
            console.log('更新之前')
        }

        componentDidUpdate () {
            console.log('更新结束')
        }

        componentWillUnmount () {
            console.log('卸载之前')
        }
    }

    ReactDOM.render(<Comp count={10}></Comp>, document.getElementById('root'))
</script>
</body>
</html>
